<template>
  <div class="search-wrap">
    <div class="search-item" v-for="(item, index) in searchList" :key="index">
      <template v-if="item.view === 'sel_search'">
        <span class="item-title">{{ item.title }}</span>
        <a-select
          :value="searchData[item.key]"
          allowClear
          show-search
          placeholder="请选择"
          option-filter-prop="children"
          class="my-input"
          :filter-option="filterOption"
          @change="(e) => onChange(e, item.key)"
        >
          <a-select-option
            v-for="key in option"
            :key="key.value"
            :value="key.value"
          >
            {{ key.name }}
          </a-select-option>
        </a-select>
      </template>
      <template v-else-if="item.view === 'list'">
        <span class="item-title">{{ item.title }}</span>
        <a-select
          :value="searchData[item.key]"
          allowClear
          placeholder="请选择"
          class="my-input"
          @change="(e) => onChange(e, item.key)"
        >
          <a-select-option
            v-for="key in commentList"
            :key="key.value"
            :value="key.value"
          >
            {{ key.label }}
          </a-select-option>
        </a-select>
      </template>
      <template v-else-if="item.view === 'date'">
        <span class="item-title">{{ item.title }}</span>
        <a-date-picker
          allowClear
          class="my-input"
          placeholder="请选择"
          :value="searchData[item.key]"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
          @change="(e) => onChange(e, item.key)"
        />
      </template>
      <template v-else-if="item.view === 'cat_tree'">
        <span class="item-title">{{ item.title }}</span>
        <a-tree-select
          allowClear
          :value="searchData[item.key]"
          class="my-input"
          :tree-data="treeData"
          placeholder="请选择"
          :maxTagCount="1"
          showSearch
          treeCheckable
          treeCheckStrictly
          treeNodeFilterProp="title"
          @change="(val) => selectTreeChange(val, item.key)"
        ></a-tree-select>
      </template>
      <template v-else-if="item.view === 'radio'">
        <span class="item-title">{{ item.title }}</span>
        <a-radio-group
          class="my-input"
          :value="searchData[item.key]"
          @change="(e) => onChange(e.target.value, item.key)"
        >
          <a-radio :value="1">正常</a-radio>
          <a-radio :value="2">冻结</a-radio>
        </a-radio-group>
      </template>
      <template v-else-if="item.view === 'text_number'">
        <span class="item-title">{{ item.title }}</span>
        <a-input-number
          allowClear
          class="my-input"
          :min="1"
          placeholder="请输入"
          :value="searchData[item.key]"
          @change="(e) => onChange(e, item.key)"
        ></a-input-number>
      </template>
      <template v-else>
        <span class="item-title">{{ item.title }}</span>
        <a-input
          allowClear
          class="my-input"
          placeholder="请输入"
          :value="searchData[item.key]"
          @change="(e) => onChange(e.target.value, item.key)"
        ></a-input>
      </template>
    </div>
    <div class="search-item my-btn">
      <a-button type="primary" @click="emit('search')">查询</a-button>
      <a-button @click="emit('reSet')">重置</a-button>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  searchList: {
    type: Array,
  },
  treeData: {
    type: Array,
  },
  searchData: {
    type: Object,
  },
  option: {
    type: Array,
  },
});
const commentList = [
  {
    label: "通过",
    value: "1",
  },
  {
    label: "不通过",
    value: "0",
  },
  {
    label: "未评审",
    value: "-1",
  },
];
const emit = defineEmits(["updateSearchData", "search", "reSet"]);
function onChange(value, key) {
  emit("updateSearchData", key, value);
}
function selectTreeChange(value, key) {
  if (value.length > 1) {
    emit("updateSearchData", key, []);
    setTimeout(() => {
      emit("updateSearchData", key, value.slice(1));
    }, 300);
  } else {
    emit("updateSearchData", key, []);
    setTimeout(() => {
      emit("updateSearchData", key, value);
    }, 300);
  }
}

function filterOption(input, option) {
  return (
    option.componentOptions.children[0].text
      .toLowerCase()
      .indexOf(input.toLowerCase()) >= 0
  );
}
</script>

<style scoped lang="less">
.search-wrap {
  width: 100%;
  //display: grid;
  //grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  //grid-gap: 10px 20px;
  //grid-auto-rows: 50px;
  //grid-auto-flow: row dense;
  display: flex;
  align-items: center;
  gap: 10px 30px;
  flex-wrap: wrap;
  .search-item {
    display: flex;
    align-items: center;
    column-gap: 10px;
    .item-title {
      white-space: nowrap;
      //width: 60px;
      text-align: right;
    }
    .my-input {
      //flex: 1;
      width: 150px;
    }
    .date-select {
      display: flex;
      align-items: center;
      column-gap: 10px;
      .date-item.ant-calendar-picker {
        min-width: unset !important;
        flex: 1;
      }
    }
  }
  .my-btn {
    display: flex;
    //justify-content: flex-end;
  }
}
/deep/ .ant-select-dropdown-menu {
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
</style>
<style>
.ant-select-dropdown {
  max-height: 500px !important;
}
.ant-select-dropdown::-webkit-scrollbar {
  width: 7px;
}
.ant-select-dropdown::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #c1c1c1;
}
</style>
